<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3扩展属性</title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 50px;
				background-color: cornflowerblue;
				border-radius: 20px;
				/*盒子阴影*/
				box-shadow: 10px 10px 5px #DEB887;
				/*文本阴影*/
				text-shadow: 10px 10px 5px #D2691E;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: chocolate;
				border-radius: 50px;
			}
			#box3{
				width: 200px;
				height: 100px;
				background-color: chocolate;
				border-radius: 100px 100px 0 0;
			}
			#box4{
				width: 100px;
				height: 100px;
				background-color: chocolate;
				border-radius: 100px 0 0 0;
			}
			
			#box5{
				width: 800px;
				height: 300px;
				background-color: cadetblue;
				
				
				background-image: url(img/05.jpg);
				background-repeat: no-repeat;
				
				background-size:cover;
			}
		</style>
	</head>
	<body>
		<h2>圆角属性border-radius</h2>
		<div id="box1" style="text-align: center; line-height: 50px; color:white;font-size: 25px; font-weight: bold;">
			注册
		</div>
		
		<div id="box2">
			
		</div>
		<div id="box3">
			
		</div>
		<div id="box4">
			
		</div>
		
		<div id="box5">
		
		
		</div>
		
	</body>
</html>
